/* Setting up the Pen. */
body {
  background-color: #222;
}

.lightsaber {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 85vw;
  height: 10vw;
  transform: translate3d(-50%, -50%, 0) rotate(-3deg);

  &:hover {
    .blade {
      width: 0;
    }
  }

  .blade {
    position: absolute;
    top: 0.5vw;
    left: 25vw;
    width: 60vw;
    height: 3vw;
    background-color: #eeeeff;
    border-radius: 0 5vw 5vw 0;
    border-top-right-radius: 10vw 5vw;
    border-bottom-right-radius: 10vw 5vw;
    box-shadow: inset 0.3vw 0 1vw #55eeff, 2vw 0 5vw #0099ff;
    transition: width 0.15s ease-in-out;
    .handle {
      position: absolute;
      top: 0;
      left: 0;
      width: 32vw;
      height: 4vw;
      border-radius: 0.2vw;
      border-top-right-radius: 1vw;
      border-bottom-right-radius: 8vw 5vw;
      background-color: #999;
      background-image: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.3) 30%,
        rgba(0, 0, 0, 0) 100%
      );
      box-shadow: 0 0 0.5vw rgba(0, 0, 0, 0.7),
        inset 0 0.25vw 0.5vw rgba(0, 0, 0, 0.5);

      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: -0.25vw;
        width: 0.5vw;
        height: 4vw;
        background-color: #555;
        border-radius: 50%;
        box-shadow: inset 0 0 0.5vw rgba(0, 0, 0, 0.5);
      }

      .button {
        position: absolute;
        top: -0.5vw;
        left: 25vw;
        width: 1vw;

        &:before {
          z-index: 1;
          content: "";
          position: absolute;
          width: 1vw;
          height: 0.4vw;
          border-radius: 0.1vw 0.1vw 40% 40%;
          background-color: red;
          box-shadow: inset 0 0.1vw 0.1vw rgba(255, 255, 255, 0.5),
            0 0.1vw 0.1vw rgba(255, 255, 255, 0.5);
        }

        &:after {
          z-index: 0;
          content: "";
          position: absolute;
          left: -0.25vw;
          top: 0.25vw;
          width: 1.5vw;
          height: 0.8vw;
          border-radius: 0.1vw 0.1vw 40% 40%;
          background-color: #666;
          background-image: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(255, 255, 255, 0.5) 30%,
            rgba(255, 255, 255, 0) 100%
          );
          box-shadow: inset 0 -0.1vw 0.25vw rgba(0, 0, 0, 0.6),
            inset 0 0.1vw 0.1vw rgba(255, 255, 255, 0.8);
        }
      }

      .guard {
        position: absolute;
        top: -1.5vw;
        left: 27vw;
        width: 1.25vw;
        height: 1.5vw;
        background-color: #444;
        border-radius: 25% 25% 0 0;
        box-shadow: inset 0.1vw 0.1vw 0 rgba(255, 255, 255, 0.1);

        &:after {
          content: "";
          position: absolute;
          top: 0.25vw;
          left: 0.25vw;
          width: 1.25vw;
          height: 1.5vw;
          background-color: #666;
          border-radius: 25% 25% 0 0;
          box-shadow: inset 0.1vw 0.1vw 0 rgba(255, 255, 255, 0.1);
        }
      }

      .knobs {
        position: absolute;
        top: 0;
        left: 25vw;

        &:before,
        &:after {
          content: "";
          position: absolute;
          top: 3.5vw;
          left: 0;
          width: 1vw;
          height: 0.5vw;
          background-color: #222;
          border-radius: 50% 50% 0.1vw 0.1vw;
        }

        &:after {
          left: 2.5vw;
        }
      }

      .divider {
        position: absolute;
        top: 0vw;
        left: 26.25vw;
        width: 0.5vw;
        height: 4vw;
        border-radius: 50%;
        box-shadow: 0.05vw 0 0 rgba(0, 0, 0, 0.5),
          0.15vw 0 0 rgba(255, 255, 255, 0.2);
      }

      .grip {
        position: absolute;
        left: 1vw;
        top: -0.5vw;
        width: 10vw;
        height: 5vw;
        background-image: linear-gradient(
          180deg,
          #111 0%,
          #111 25%,
          transparent 25%,
          transparent 35%,
          #111 35%,
          #111 75%,
          transparent 75%,
          transparent 85%,
          #111 85%,
          #111 100%
        );
        border-radius: 0.5vw;
      }

      .lever {
        position: absolute;
        top: 0;
        left: 12vw;
        width: 7vw;
        height: 4vw;
      }

      .bands {
        &:before,
        &:after {
          content: "";
          position: absolute;
          top: -0.1vw;
          left: 0;
          width: 1.5vw;
          height: 100%;
          background-color: #666;
          background-image: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.5) 20%,
            rgba(255, 255, 255, 0.2)
          );
          box-shadow: -0.1vw 0 0 rgba(0, 0, 0, 0.5),
            0.1vw 0 0 rgba(0, 0, 0, 0.2);
        }

        &:after {
          left: 5.25vw;
        }
      }

      .jut-out {
        position: absolute;
        top: 2.25vw;
        left: 0.25vw;
        width: 7vw;
        height: 0.5vw;
        background-color: #999;
        transform: skewX(45deg);
        box-shadow: -0.1vw -0.1vw 0.1vw rgba(0, 0, 0, 0.5);
      }

      .switch {
        position: absolute;
        top: 2vw;
        left: 0;

        &:before {
          content: "";
          position: absolute;
          left: 0;
          top: 0.5vw;
          width: 0.5vw;
          height: 1.75vw;
          background-color: #333;
          transform: skewY(45deg);
          box-shadow: -0.1vw -0.1vw 0.1vw rgba(0, 0, 0, 0.5);
        }

        &:after {
          content: "";
          position: absolute;
          left: 0.5vw;
          top: 0.75vw;
          width: 7vw;
          height: 1.75vw;
          background-color: #594125;
          background-image: linear-gradient(
            90deg,
            transparent 50%,
            rgba(0, 0, 0, 0.75) 60%,
            rgba(0, 0, 0, 0.75) 80%,
            transparent 100%
          );
          background-size: 0.5vw 1.75vw;
          box-shadow: inset 0.1vw 0.1vw 0 #666, inset -0.1vw -0.1vw 0 #666,
            inset 0.25vw 0.25vw 0.1vw rgba(0, 0, 0, 0.5),
            inset -0.25vw -0.25vw 0.1vw rgba(255, 255, 255, 0.1);
        }
      }
    }
  }
}
